<template>
	<view class="content">
		<view class="top-box">
			<view class="img-box">
				<view class="title">头像</view>
				<view class="imgs">
					<!-- 默认图片 -->
					<image v-if="userInfo.userIndexPath == 0" class="img-item" src="../../../static/minilogo.png"
						mode="" @click="choseImg()"></image>
					<!-- 老图片 -->
					<image v-if="userInfo.userIndexPath == 1" class="img-item" :src="base64Img(userInfo.userOldImg)"
						mode="" @click="choseImg()"></image>
					<!-- 新图片 -->
					<image v-if="userInfo.userIndexPath == 2" class="img-item" :src="userInfo.userImgPath" mode=""
						@click="choseImg()"></image>
				</view>
			</view>
			<view class="user-name">
				<view class="title">
					用户昵称
				</view>
				<input class="text" v-model="userInfo.userName" maxlength="20" placeholder="输入用户名" />
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="gotoUserInfo()">
				保存
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';

	import {
		getUserInfo,
		userInfoUploadFile
	} from '../../../api/mine_api.js'

	import {
		base64Img
	} from '../../../tools/tools.js'

	const userInfo = reactive({
		userName: '',
		openId: '',
		userImgPath: '',
		userOldImg: '',
		userIndexPath: 0
	});



	const choseImg = () => {
		// 选择媒体文件
		uni.chooseMedia({
			count: 1,
			mediaType: ['image'],
			success: (res) => {
				userInfo.userImgPath = res.tempFiles[0].tempFilePath;
				// 上传文件
				uni.uploadFile({
					url: 'http://49.232.9.55:8069/yunyou_edit',
					// url: 'https://sanlimessage.fun/yunyou_edit',
					filePath: userInfo.userImgPath,
					name: 'tou_xiang',
					formData: {
						name: userInfo.userName,
						open_id: userInfo.openId
					},
					method: 'POST',
					success: (uploadRes) => {
						userInfo.userIndexPath = 2

						uni.showLoading({
							title: '加载中...'
						});
						setTimeout(() => {
							uni.hideLoading()
							uni.showToast({
								title: '保存成功',
								icon: 'success',
								duration: 2000
							})
						}, 3000)
					},
					fail: (err) => {
						console.error('上传失败:', err);
					}
				});
			},
			fail: (err) => {
				console.error('选择媒体文件失败:', err);
			}
		});
	};

	// 上传用户信息
	const gotoUserInfo = () => {
		userInfoUploadFile(userInfo.userName, userInfo.openId).then((res) => {
			uni.showLoading({
				title: '加载中...'
			});
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					duration: 2000
				})
			}, 2000)
		})
	}


	// 获取用户数据
	const _getUserInfo = (openid) => {
		getUserInfo(openid).then((res) => {
			userInfo.userName = res.name
			if (res.result.tou_xiang == '') {
				userInfo.userIndexPath = 0
			} else {
				userInfo.userIndexPath = 1
				userInfo.userOldImg = res.result.tou_xiang
				userInfo.userName = res.result.name
			}
			console.log('用户数据', res);
		})
	}

	onLoad(() => {
		uni.getStorage({
			key: 'openid',
			success: function(res) {
				userInfo.openId = res.data.openid
				_getUserInfo(res.data.openid)
			}
		})

	})
</script>

<style scoped>
	@font-face {
		font-family: CustomFont;
		src: url('./iconfont.ttf');
	}
</style>
<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: linear-gradient(to bottom, rgba(135, 213, 255, 1) 0%, rgba(211, 211, 211, 0.58) 42%, rgba(211, 211, 211, 0) 100%);
		position: relative;
		min-height: 100vh;
		padding-bottom: 100rpx;

		.top-box {
			padding: 20rpx;

			.img-box {
				background-color: white;
				padding: 20rpx;
				border-radius: 20rpx;

				.title {
					font-weight: 700;
					font-size: 30rpx;
					color: royalblue;
					margin-right: 40rpx;
					margin-bottom: 20rpx;
				}

				.imgs {
					display: flex;
					justify-content: center;

					.img-item {
						display: block;
						width: 300rpx;
						height: 300rpx;
						border-radius: 40rpx;
						border: 1px solid gainsboro;
					}
				}
			}

			.user-name {
				margin-top: 20rpx;
				background-color: white;
				padding: 20rpx;
				border-radius: 20rpx;

				.title {
					font-weight: 700;
					font-size: 30rpx;
					color: royalblue;
					margin-right: 40rpx;
					margin-bottom: 20rpx;
				}

				.text {
					border-bottom: 1px solid gainsboro;
				}
			}
		}

		.btn-box {
			position: fixed;
			bottom: 0;
			min-width: 100vw;
			height: 80rpx;
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;

			.btn {
				border-radius: 20rpx;
				font-size: 26rpx;
				padding: 20rpx 300rpx;
				text-align: center;
				background-color: skyblue;
				color: white;
			}
		}
	}
</style>